<template>
<div class="myCard">
  <div class="title">
    <slot name="title"></slot>
  </div>
  <div class="content">
    <slot>
        <ul>
            <li v-for="(item,index) in list"
            :key="index">
            <!-- 通过作用域插槽 把数据传递回父组件
            作用域插槽其实就是通过给slot标签添加一个然后绑定你想传递给父组件的值
            父组件中就能够通过这个属性接收到传递的值 -->
                <slot :name="item" :row="item">{{item}}</slot>
            </li>
        </ul>
    </slot>
  </div>
</div>
</template>
<script>
export default {
  props: {
    // title: String // String表示规定title值的类型
    title: {
      type: String, // String表示规定title值的类型
      default: '我是默认值' // 设置title的默认值
    },
    list: {
      type: Array,
      default: () => {
        return []
      } // 设置对象类型数据的默认值必须通过函数的形式返回
    }
  }
}
</script>
<style lang="scss" scoped>
.myCard{
    min-width: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: inline-block;
    .title{
        border-bottom: 1px solid #ccc;
        padding: 20px;
    }
    .content{
        padding: 20px;
    }
}
</style>
